<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
	<th:block th:include="include :: header('商城订单详情')" />
	<style type="text/css">
		.fixed-table-toolbar {
			display: none;
		}
	</style>
</head>

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<div class="row">
			<div class="col-sm-12 ">
				<div class="alert alert-danger" th:if="${shopOrder.status eq 1 }">
					[[${@dict.getLabel('shop_order_status', shopOrder.status)}]]
				</div>
				<div class="alert alert-warning" th:if="${shopOrder.status eq 2 }">
					[[${@dict.getLabel('shop_order_status', shopOrder.status)}]]
				</div>
				<div class="alert alert-info" th:if="${shopOrder.status eq 3 }">
					[[${@dict.getLabel('shop_order_status', shopOrder.status)}]]
				</div>
				<div class="alert alert-success" th:if="${shopOrder.status eq 4 }">
					[[${@dict.getLabel('shop_order_status', shopOrder.status)}]]
				</div>
			</div>

		</div>

		<form class="form-horizontal m-t" id="orderForm">
			<input type="hidden" id="orderId" name="orderId" th:value="${shopOrder.orderId}">
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab-order-info" data-toggle="tab" aria-expanded="true">订单信息</a>
					</li>
					<li><a href="#tab-goods-info" data-toggle="tab" aria-expanded="false">商品信息</a></li>
					<li><a href="#tab-order-delivery" data-toggle="tab" aria-expanded="false" th:if="${shopOrder.deliveryStatus eq 0}">配送信息</a></li>
					<li><a href="#tab-order-history" data-toggle="tab" aria-expanded="false">操作记录</a></li>
				</ul>
				<input name="tableId" type="hidden" />
				<div class="tab-content">
					<div class="tab-pane active" id="tab-order-info">
						<h4 class="form-header h4">订单信息</h4>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">订单类型：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_order_type', shopOrder.orderType)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">订单编号：</label>
									<div class="form-control-static" th:text="${shopOrder.orderNo}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">下单时间：</label>
									<div class="form-control-static"
										th:text="${#dates.format(shopOrder.createTime, 'yyyy-MM-dd HH:mm:ss')}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">

						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">商品总数：</label>
									<div class="form-control-static" th:text="${shopOrder.goodsCount}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">商品总额：</label>
									<div class="form-control-static" th:text="${shopOrder.goodsAmount}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">配送金额：</label>
									<div class="form-control-static" th:text="${shopOrder.deliveryAmount}">
									</div>
								</div>
							</div>

						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">合计金额：</label>
									<div class="form-control-static" th:text="${shopOrder.totalAmount}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">优惠金额：</label>
									<div class="form-control-static text-danger" th:text="${shopOrder.couponAmount}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">实付金额：</label>
									<div class="form-control-static text-navy" th:text="${shopOrder.payAmount}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">支付状态：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_pay_status', shopOrder.payStatus)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4" th:if="${shopOrder.status gt 1}">
								<div class="form-group">
									<label class="col-sm-4 control-label ">支付方式：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_pay_type', shopOrder.payType)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4" th:if="${shopOrder.status gt 1}">
								<div class="form-group">
									<label class="col-sm-4 control-label ">支付时间：</label>
									<div class="form-control-static"
										th:text="${#dates.format(shopOrder.payTime, 'yyyy-MM-dd HH:mm:ss')}">
									</div>
								</div>
							</div>
						</div>

						<h4 class="form-header h4">收货信息</h4>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">配送类型：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_delivery_type', shopOrder.deliveryType)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">收货人：</label>
									<div class="form-control-static" th:text="${shopOrder.contact}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">联系电话：</label>
									<div class="form-control-static" th:text="${shopOrder.mobile}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">所在省份：</label>
									<div class="form-control-static" th:text="${shopOrder.provinceName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所在城市：</label>
									<div class="form-control-static" th:text="${shopOrder.cityName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所在县区：</label>
									<div class="form-control-static" th:text="${shopOrder.districtName}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">详细地址：</label>
									<div class="form-control-static" th:text="${shopOrder.address}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label "> 发货状态：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_delivery_status', shopOrder.deliveryStatus)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4" th:if="${shopOrder.deliveryStatus eq 0}">
								<div class="form-group">
									<label class="col-sm-4 control-label ">发货时间：</label>
									<div class="form-control-static"
										th:text="${#dates.format(shopOrder.deliveryTime, 'yyyy-MM-dd HH:mm:ss')}">
									</div>
								</div>
							</div>
						</div>
						<div class="row" th:if="${shopOrder.note}">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label">买家备注：</label>
									<div class="form-control-static" th:text="${shopOrder.note}">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-goods-info">
						<div class="row">
							<div class="col-sm-12">
								<table id="bootstrap-table"></table>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-order-delivery" th:if="${shopOrder.deliveryStatus eq 0}">
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">收货人：</label>
									<div class="form-control-static" th:text="${delivery.contact}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">联系电话：</label>
									<div class="form-control-static" th:text="${delivery.mobile}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">详细地址：</label>
									<div class="form-control-static" th:text="${delivery.address}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">所在省份：</label>
									<div class="form-control-static" th:text="${delivery.provinceName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所在城市：</label>
									<div class="form-control-static" th:text="${delivery.cityName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">所在县区：</label>
									<div class="form-control-static" th:text="${delivery.districtName}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">物流公司：</label>
									<div class="form-control-static" th:text="${delivery.expressName}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">物流编号：</label>
									<div class="form-control-static" th:text="${delivery.expressCode}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">物流单号：</label>
									<div class="form-control-static" th:text="${delivery.deliveryNo}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label">发货状态：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_delivery_status', delivery.deliveryStatus)}">
									</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label ">收货状态：</label>
									<div class="form-control-static"
										th:text="${@dict.getLabel('shop_rog_status', delivery.rogStatus)}">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="tab-order-history">
						<div class="row">
							<div class="col-sm-12">
								<table id="history-table"></table>
							</div>
						</div>
					</div>

				</div>
			</div>

		</form>
	</div>

	<div class="box-footer">
		<div class="col-sm-offset-5 col-sm-6">
			<button th:if="${shopOrder.status eq 1 }" type="button" class="btn btn-sm btn-success" onclick="payOrder()">
				订单支付
			</button>
			<button th:if="${shopOrder.status eq 2 }" type="button" class="btn btn-sm btn-success"
				onclick="deliveryOrder()">
				订单发货
			</button>
			<button th:if="${shopOrder.status eq 3 }" type="button" class="btn btn-sm btn-success"
				onclick="showExpress()">
				查看物流
			</button>
			&nbsp;
			<button type="button" class="btn btn-sm btn-info" onclick="remarkOrder()">
				添加备注
			</button>
			&nbsp;
			<button type="button" class="btn btn-sm btn-default" onclick="$.modal.close()">
				关闭
			</button>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "shop/trade/order";
		var data = [[${orderItems}]];
		var historys = [[${orderHistorys}]];
		var operTypes = [[${@dict.getType('shop_oper_type')}]];
		$(function () {
			var options1 = {
				id: 'bootstrap-table',
				data: data,
				pagination:false,
				modalName: "商品列表",
				columns: [
					{
						field: 'image',
						title: '商品图片',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.imageView(value);
						}
					},
					{
						field: 'goodsName',
						title: '商品名称',
						align: 'center',
						formatter: function (value, row, index) {
							return $.table.tooltip(value);
						}
					},
					{
						field: 'skuName',
						title: '规格',
						align: 'center'
					},
					{
						field: 'goodsPrice',
						title: '售价(元)',
						align: 'center'
					},
					{
						field: 'goodsCount',
						title: '数量',
						align: 'center'
					},
					{
						field: 'goodsAmount',
						title: '商品总额',
						align: 'center'
					},
					{
						field: 'couponAmount',
						title: '优惠额',
						align: 'center'
					},
					{
						field: 'deliveryAmount',
						title: '配送费',
						align: 'center'
					},
					{
						field: 'totalAmount',
						title: '小计',
						align: 'center'
					},
					{
						field: 'payAmount',
						title: '实付金额',
						align: 'center'
					}]
			};
			$.table.init(options1);
			
			
			var options2 = {
				id: 'history-table',
				data: historys,
				pagination:false,
				modalName: "操作记录",
				columns: [
					{
						field: 'operAction',
						title: '操作标识',
						align: 'center'
					},
					{
						field: 'operType',
						title: '操作类型',
						align: 'center',
	                   	formatter: function(value, item, index) {
	    		            return $.table.selectDictLabel(operTypes,value);
	   		            }
					},
					{
						field: 'operHistory',
						title: '操作记录',
						align: 'center'
					},
					{
						field: 'operIp',
						title: '操作Ip',
						align: 'center'
					},
					{
						field: 'operTime',
						title: '操作时间',
						align: 'center'
					},
			  ]
			};
			$.table.init(options2);

		});
		//立即付款
		function payOrder() {
			$.modal.confirm("确认要修改立即支付吗?修改后订单状态将无法恢复,请谨慎操作!", function () {
				$.operate.post(prefix + "/pay/" + $("#orderId").val(), {}, function (res) {
					if (res.code == web_status.SUCCESS) {
						layer.msg("保存成功,正在刷新数据请稍候……", {
							icon: 1,
							time: 500,
							shade: [0.1, '#8F8F8F']
						}, function () {
							location.reload();
						});
					} else {
						$.modal.alertError(res.msg);
					}
				});
			});
		}
		//订单发货
		function deliveryOrder() {
			var url = prefix + "/delivery/" + $("#orderId").val();
			$.modal.open("发货", url, '800', '500');
		}
		
		  //备注订单
    	function remarkOrder() {
    		 layer.prompt({title: '添加备注', formType: 2,maxlength: 200}, function(itemName, index){
    			 $.ajax({
        	            url: prefix + "/remark",
        	            type: "post",
        	            data:{orderId:$("#orderId").val(),remark:itemName},
        	            success: function(result) {
        	            	if (result.code == web_status.SUCCESS) {
        	            		   layer.close(index);
        	            	} else {
        	            		alert(result.msg);
        	            	}
        	            }
        	        })
 	  	   });
		}

		/** 预览轮播图片 */
		function imagePreview(url) {
			$.table.imageView(url);
		}

	</script>
</body>

</html>